import React, { useImperativeHandle } from 'react';

import { useInitSize } from '../DesignerHooks';

import { Canvas } from './Canvas';

import './styles.less';
import cls from 'classnames';

const clsName = 'design-canvas';

interface ICanvasType {
  id: string;
}

export const CanvasLayout = React.forwardRef(
  ({ id }: ICanvasType, ref: any) => {
    // const canvasRef = React.useRef<Record<string, any>>();

    const { initSize } = useInitSize('design-canvas-layout');

    // const context = useContext(DesignerContext);

    useImperativeHandle(ref, () => ({
      setSize: (pramas: any) => {},
    }));

    return (
      <div className={cls(`${clsName}-layout`)}>
        {/* <div className={cls(`${clsName}-header`)}>
          <div className={cls(`${clsName}-header-left`)}>
            <Button
              icon={<MyIcon type={'icon-Undo'} />}
              size={'small'}
              onClick={() => {
                context?.undo();
              }}
              type={'primary'}
            >
              撤销
            </Button>
            <Button
              icon={<MyIcon type={'icon-Redo'} />}
              size={'small'}
              onClick={() => {
                context?.redo();
              }}
              type={'primary'}
            >
              恢复
            </Button>
            <Button
              icon={<MyIcon type={'icon-fuzhi1'} />}
              size={'small'}
              onClick={() => {
                context?.copy();
              }}
            >
              复制
            </Button>
            <Button
              icon={<MyIcon type={'icon-niantie1'} />}
              size={'small'}
              onClick={() => {
                context?.paste();
              }}
            >
              粘贴
            </Button>
          </div>
          <div className={cls(`${clsName}-header-right`)}>
            <Button
              icon={<ZoomInOutlined />}
              size={'small'}
              onClick={() => {
                context?.scaleTo('in');
              }}
              type={'primary'}
            >
              放大
            </Button>
            <Button
              icon={<ZoomOutOutlined />}
              size={'small'}
              onClick={() => {
                context?.scaleTo('out');
              }}
              type={'primary'}
            >
              缩小
            </Button>
            <Button
              icon={<ReloadOutlined />}
              size={'small'}
              onClick={() => {
                context?.scaleTo('reset');
              }}
              type={'default'}
            >
              重置
            </Button>
            <Tag color={'geekblue'}>
              <>{parseInt(context?.scale * 100) + '%'}</>
            </Tag>
          </div>
        </div> */}
        <div className={cls(`${clsName}-content`)} id="design-canvas-layout">
          {initSize?.width > 0 && initSize?.height > 0 && (
            <Canvas id={id} initSize={initSize} />
          )}
        </div>
      </div>
    );
  },
);
